<template>
  <tool-page title="生成随机数字字母串" :value="value" @generate="generate" :remark="remark">
    <template #operate>
      长度：
      <InputNumber v-model="length" :min="1" controls-outside/>
    </template>
    <template #operateButton>
      <Button type="success" @click="generate(5)">5位</Button>
      <Button type="success" @click="generate(8)">8位</Button>
      <Button type="success" @click="generate(9)">9位</Button>
      <Button type="success" @click="generate(11)">11位</Button>
      <Button type="success" @click="generate(12)">12位</Button>
      <Button type="success" @click="generate(13)">13位</Button>
      <Button type="success" @click="generate(16)">16位</Button>
      <Button type="success" @click="generate(18)">18位</Button>
      <Button type="success" @click="generate(19)">19位</Button>
      <Button type="success" @click="generate(26)">26位</Button>
    </template>
  </tool-page>
</template>

<script>
export default {
  name: "RandAlphanumeric",
  data() {
    return {
      value: '',
      length: 32,
      remark: '随机生成一段由数字大小写字母组成的文字'
    }
  },
  methods: {
    generate(len) {
      this.value = this.simpleUtils.randomAlphanumeric(len || this.length)
    }
  },
  created() {
    this.generate();
  }
}
</script>

<style scoped>

</style>
